![Reactのグラフライブラリ「react-chartjs-2」を使ってみた。](https://devio2023-media.developers.io/wp-content/uploads/2021/12/react-chartjs-icatch.jpeg)
Reactのグラフライブラリ「react-chartjs-2」を使ってみた。
Reactでグラフライブラリ使って、グラフを表示してみました。
react-chartjs-2とは
「react-chartjs-2」は「chart.js」というjavaScriptのグラフ描画ライブラリを、Reactでも利用できるようにしたラッパーライブラリです。「react-chartjs-2」の元となっている「chart.js」は、javascriptを使ってwebサイトにグラフを表示する際に広く使われているライブラリです。「chart.js」をそのまま利用して、React上でグラフを扱うことは難しいのですが、「react-chartjs-2」を使うことでReact上でも簡単にグラフを表示することができます。
「react-chartjs-2」のドキュメント
https://react-chartjs-2.netlify.app/
「chart.js」のドキュメント
https://www.chartjs.org/docs/latest/
インストール方法
react-chartjs-2はラッパーライブラリのため、利用する際にはchart.jsも一緒にインストールする必要があります。
npm install -D chart.js react-chartjs-2
描画できるグラフの種類
chart.jsのドキュメントを見ると、グラフの種類として以下のようなものが書かれています。
- Line Chart
- Bar Chart
- Radar Chart
- Doughnut and Pie Charts
- Polar Area Chart
- Scatter Chart
- Area Chart
- Mixed Chart Types
実際にグラフを表示してみた
import React from "react";
import { Line } from "react-chartjs-2";
function App() {
const labels = ["1 月", "2 月", "3 月", "4 月", "5 月", "6 月"];
const graphData = {
labels: labels,
datasets: [
{
label: "A社",
data: [65, 59, 60, 81, 56, 55],
borderColor: "rgb(75, 192, 192)",
},
{
label: "B社",
data: [60, 55, 57, 61, 75, 50],
borderColor: "rgb(75, 100, 192)",
},
],
};
const options: {} = {
maintainAspectRatio: false,
};
const divStyle: React.CSSProperties = {
marginLeft: "auto",
marginRight: "auto",
margin: "10px",
width: "500px",
};
return (
<div className="App" style={divStyle}>
<Line
height={300}
width={300}
data={graphData}
options={options}
id="chart-key"
/>
</div>
);
}
export default App;
オプションの指定
オブションを指定することでグラフを細かくカスタマイズすることができます。自分が実際に使ってみたオプションをいくつか紹介します。
legend
legendでは、グラフの凡例の設定を行うことができます。legendのドキュメントを確認すると、Namespace: options.plugins.tooltip
と書いてあります。そのため、legendは親キーにpluginsを指定する必要があります。凡例のオプションを指定する場合は、上記に貼った折れ線グラフのコードの22~24行目を、以下のコードに置き換えます。
const options: {} = {
maintainAspectRatio: false,
plugins: {
legend: {
position:"bottom",
labels: {
padding: 10,
font: {
size: 20,
},
},
},
},
};
tooltip
tooltipはグラフのデータにカーソルを合わせた際に表示される、吹き出しです。背景の色や文字のサイズ、表示する位置などを調整することができます。
const options: {} = {
maintainAspectRatio: false,
plugins: {
tooltip: {
titleFont: { size: 17 },
bodyFont: { size: 17 },
titleMarginBottom: 15,
backgroundColor: "rgba(255,112,162,0.8)",
titleColor: "rgba(0,0,0,1)",
bodyColor: "rgba(0,0,0,1)",
displayColors: true,
xAlign: "center"
},
},
};
複数のオプションを指定する場合は以下のようなコードになります。
const options: {} = {
scales: {
radialLinear: {
max: 100,
min: 0,
pointLabels: {
font: {
size: [25, 20, 20, 20, 20, 20],
weight: "bold",
},
color: [
"rgba(255,0,0,1)",
"rgba(0,0,0,1)",
"rgba(0,0,0,1)",
"rgba(0,0,0,1)",
"rgba(0,0,0,1)",
"rgba(0,0,0,1)",
],
},
},
},
plugins: {
legend: {
position:"bottom",
labels: {
padding: 10,
font: {
size: 20,
},
},
},
},
};